<template>
  <div class="app-container">

    <vxe-grid
      ref="xGrid"
      border
      resizable
      keep-source
      size="small"
      align="center"
      round
      highlight-hover-row
      :loading="loading"
      :pager-config="tablePage"
      :columns="tableColumn"
      :data="tableData"
      :form-config="tableForm"
      :toolbar="{slots: {buttons: 'toolbar_buttons'}}"
      @page-change="page"
      @form-submit="search"
    >
      <template v-slot:operate="{ row }">
        <vxe-button v-has="perms.edit" type="text" circle @click="edit(row)"><svg-icon icon-class="bianji" /></vxe-button>
        <vxe-button v-if="row.isSys != 1" v-has="perms.delete" status="danger" title="删除" type="text" @click="remove(row)"><svg-icon icon-class="shanchu" /></vxe-button>
      </template>

      <template v-slot:toolbar_buttons>
        <vxe-button v-has="perms.add" size="mini" status="primary" icon="fa fa-plus" @click="add">新增</vxe-button>
      </template>
    </vxe-grid>

    <vxe-modal v-model="dialogVisible" :title="dialogTitle" width="800" :loading="submitLoading" resize destroy-on-close>
      <template v-slot>
        <ele-form
          ref="eleForm"
          v-model="formData"
          :form-desc="formDesc"
          :request-fn="handleSubmit"
          :rules="rules"
          label-position="right"
          :is-dialog="true"
          @close="closeDialog()"
        />

      </template>
    </vxe-modal>
  </div>

</template>
<script>
import api from '@/api/role'
import strings from '@/utils/strings'
import { mappingArray } from '@/utils/tools'
import menuPermissionApi from '@/api/menuPermission'

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      dialogVisible: false,
      submitLoading: false,
      dialogTitle: '',
      name: '角色',
      perms: {
        add: 'role:add',
        edit: 'role:edit',
        delete: 'role:delete'
      },
      tableData: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableForm: {
        data: {
          name: '',
          status: ''
        },
        items: [
          { field: 'name', title: '角色名:', itemRender: { name: '$input', props: { placeholder: '请输入', clearable: true }}},
          { field: 'status', title: '状态:', itemRender: { name: '$select', options: [], props: { placeholder: '请选择', clearable: true }}},
          { itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '查询', status: 'primary' }}, { props: { type: 'reset', content: '重置' }}] }}

        ]
      },
      tableColumn: [
        { type: 'seq', width: 40 },
        { field: 'name', title: '角色名' },
        { field: 'seq', title: '排序号' },
        { field: 'statusValue', title: '状态' },
        { field: 'isSysValue', title: '是否系统角色' },
        { title: '操作', width: 120, fixed: 'right', slots: { default: 'operate' }}
      ],
      formData: {
        name: '',
        seq: '',
        status: '',
        menuPermissionIds: []
      },
      formDesc: {
        name: {
          type: 'input',
          label: '角色名'
        },
        seq: {
          type: 'number',
          label: '序号'
        },
        status: {
          type: 'radio',
          label: '状态',
          default: 0,
          options: [],
          vif(row) {
            return row.code !== 'admin'
          }
        },
        menuPermissionIds: {
          type: 'tree-select',
          label: '菜单权限',
          options: [],
          attrs: {
            multiple: true
          },
          vif(row) {
            return row.code !== 'admin'
          }
        }

      },
      rules: {
        name:
          { required: true, message: '角色名不能为空' }

      }
    }
  },
  mounted() {
  },
  created() {
    this.listData()
    this.setRoleStatus()
    this.getMenuPerssion()
  },
  methods: {
    listData() {
      this.loading = true
      this.tableForm.data.page = this.tablePage.currentPage
      this.tableForm.data.pageSize = this.tablePage.pageSize
      api.pageData(this.tableForm.data).then(res => {
        const data = res.data
        this.tableData = data.data
        this.tablePage.currentPage = parseInt(data.page)
        this.tablePage.pageSize = parseInt(data.pageSize)
        this.tablePage.total = parseInt(data.total)
        this.loading = false
      })
    },
    search() {
      this.tablePage.currentPage = 1
      this.listData()
    },
    page({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.listData()
    },
    setRoleStatus() {
      api.roleStatus().then(res => {
        const data = res.data
        this.tableForm.items[1].itemRender.options = mappingArray({ value: 'label', code: 'value' }, data)
        this.formDesc.status.options = mappingArray({ value: 'text', code: 'value' }, data)
      })
    },
    remove(row) {
      this.$confirm(strings.delMsg, strings.prompt, {
        confirmButtonText: strings.ok,
        cancelButtonText: strings.cancel,
        type: 'warning'
      }).then(() => {
        this.loading = true
        api.remove(row.id).then(res => {
          this.listData()
        }, () => {
          this.loading = false
        })
      })
    },
    add() {
      this.eidt = false
      this.resetForm()
      this.dialogVisible = true
      this.dialogTitle = '新增' + this.name
    },
    edit(row) {
      this.eidt = true
      this.resetForm()
      this.dialogVisible = true
      this.dialogTitle = '编辑' + this.name
      api.data(row.id).then(res => {
        this.formData = res.data
      })
    },
    closeDialog() {
      this.dialogVisible = false
      this.formData = {}
    },
    resetForm() {
      this.formData = {}
      if (this.$refs.eleForm) {
        this.$refs.eleForm.resetForm()
      }
    },
    handleSubmit(data) {
      this.submitLoading = true
      api.saveOrUpdate(data).then(() => {
        this.listData()
        // 重置formData
        this.formData = {}
        this.dialogVisible = false
        this.submitLoading = false
      })
    },
    getMenuPerssion() {
      menuPermissionApi.treeMenuPermission().then(res => {
        this.formDesc.menuPermissionIds.options = JSON.parse(JSON.stringify(res.data).replace(/name/g, 'label'))
      })
    }
  }
}
</script>
<style lang="sass" scoped>
</style>
